<?xml version="1.0" encoding="utf-8"?>

<div xmlns="http://www.w3.org/1999/xhtml" component="$UI/system/components/justep/window/window" design="device:mobile">  
  <div component="$UI/system/components/justep/model/model" xid="model" style="height:auto;top:11px;left:124px;">
    <div component="$UI/system/components/justep/data/data" autoLoad="true"
      xid="areaData" idColumn="mId" onCustomRefresh="areaDataCustomRefresh">
      <column isCalculate="false" name="mId" type="Integer" xid="xid3"/>  
      <column name="id" type="String" xid="xid1"/>  
      <column name="name" type="String" xid="xid2"/>
    </div>
  </div>  
  <div component="$UI/system/components/justep/panel/panel" class="x-panel x-full"> 
    <div class="x-panel-top" xid="top1"> 
      <div component="$UI/system/components/justep/titleBar/titleBar" class="x-titlebar"
        xid="titleBar1" style="background-color:#58ACFC;" title="社区地图"> 
        <div class="x-titlebar-left" xid="left1"/>  
        <div class="x-titlebar-title" xid="title1">社区地图</div>  
        <div class="x-titlebar-right reverse" xid="right1"/> 
      </div> 
    </div>  
    <div class="x-panel-content x-bg-c"> 
      <div id="container" style="height:100%;"> 
        <!--     <div component="$UI/system/components/bootstrap/row/row" class="row x-menu-grid4"
          xid="row4"> 
            
           
        </div>  -->  
        <div component="$UI/system/components/justep/row/row" class="x-row"
          xid="row8" style="height:100%;"> 
          <div class="x-col" xid="col28" style="height:100%;padding-right:2%;padding-left:2%;">
            <div url="./channel/menu11Pic1.w" bind-touchstart="onTouchStart" bind-click="getAreaList" 
              bind-touchend="onTouchEnd" style="background-color:#906AA0;height:36%;"
              xid="div11" align="center" class="card" bind-attr="{&quot;areaId&quot;: $model.getRowIDById(1)}"> 
              <div xid="div1" class="vertical-center"> 
                <div xid="div2"> 
                  <div component="$UI/system/components/justep/output/output"
                    class="x-output" xid="output1" bind-text=" $model.getTitleByRowId(1)"
                    style="color:#FFFFFF;font-weight:bold;font-size:medium;"/>
                </div> 
              </div>
            </div>  
            <div class="card" url="./channel/menu13Pic1.w" bind-click="getAreaList"
              bind-touchstart="onTouchStart" bind-touchend="onTouchEnd" style="background-color:#9CA0C7;height:20%;"
              xid="div12" align="center" bind-attr="{&quot;areaId&quot;: $model.getRowIDById(2)}"> 
              <div xid="div15" class="vertical-center">
                <div component="$UI/system/components/justep/output/output"
                  class="x-output" xid="output4" bind-text="$model.getTitleByRowId(2)"
                  style="color:#FFFFFF;font-weight:bold;font-size:medium;"/>
              </div> 
            </div>  
            <div class="card" url="./channel/image5.w" bind-click="getAreaList"
              bind-touchstart="onTouchStart" bind-touchend="onTouchEnd" style="background-color:#99CCFD;height:38%;"
              xid="div13" align="center" bind-attr="{&quot;areaId&quot;: $model.getRowIDById(3)}"> 
              <div xid="div14" class="vertical-center">
                <div component="$UI/system/components/justep/output/output"
                  class="x-output" xid="output5" bind-text="$model.getTitleByRowId(3)"
                  style="color:#FFFFFF;font-weight:bold;font-size:medium;"/>
              </div>
            </div> 
          </div>  
          <div class="x-col" xid="col29" style="height:100%;padding-left:2%;padding-right:2%;">
            <div class="card" url="./channel/menu11Pic2.w" bind-click="getAreaList"
              bind-touchstart="onTouchStart" bind-touchend="onTouchEnd" style="background-color:#97AEBD;font-size:small;height:36%;"
              xid="div6" align="center" bind-attr="{&quot;areaId&quot;: $model.getRowIDById(4)}"> 
              <div xid="div18" class="vertical-center">
                <div component="$UI/system/components/justep/output/output"
                  class="x-output" xid="output6" bind-text="$model.getTitleByRowId(4)"
                  style="color:#FFFFFF;font-weight:bold;font-size:medium;"/>
              </div>
            </div>  
            <div class="card" url="./channel/menu11Pic3.w" bind-click="getAreaList"
              bind-touchstart="onTouchStart" bind-touchend="onTouchEnd" style="background-color:#E29023;height:20%;"
              xid="div7" align="center" bind-attr="{&quot;areaId&quot;: $model.getRowIDById(5)}"> 
              <div xid="div19" class="vertical-center">
                <div component="$UI/system/components/justep/output/output"
                  class="x-output" xid="output7" bind-text="$model.getTitleByRowId(5)"
                  style="color:#FFFFFF;font-weight:bold;font-size:medium;"/>
              </div>
            </div>  
            <div class="card" url="./channel/menu14Pic1.w" bind-click="getAreaList"
              bind-touchstart="onTouchStart" bind-touchend="onTouchEnd" style="background-color:#D2A0C3;height:18%;"
              xid="div8" align="center" bind-attr="{&quot;areaId&quot;: $model.getRowIDById(6)}"> 
              <div xid="div5" class="vertical-center">
                <div component="$UI/system/components/justep/output/output"
                  class="x-output" xid="output8" bind-text="$model.getTitleByRowId(6)"
                  style="color:#FFFFFF;font-weight:bold;font-size:medium;"/>
              </div> 
            </div>  
            <div class="card" url="./channel/menu14Pic2.w" bind-click="getAreaList"
              bind-touchstart="onTouchStart" bind-touchend="onTouchEnd" style="background-color:#7C3C33;height:18%;"
              xid="div9" align="center" bind-attr="{&quot;areaId&quot;: $model.getRowIDById(7)}"> 
              <div xid="div21" class="vertical-center">
                <div component="$UI/system/components/justep/output/output"
                  class="x-output" xid="output9" bind-text="$model.getTitleByRowId(7)"
                  style="color:#FFFFFF;font-weight:bold;font-size:medium;"/>
              </div>
            </div> 
          </div> 
        </div>
      </div> 
    </div>  
    <img src="$UI/communityOto/community/img/communityOto.png" alt="" xid="image10"
      style="height:100%;width:100%;text-align:center;vertical-align:middle;"/>
  </div> 
</div>
